<template>
  <div class="container">
    <div class="login">
      <div class="title"><span class="titleInfo">欢迎回家</span></div>
      <div class="row"></div>
      <div class="content">
        <el-input v-model="login.user" placeholder="请输入用户名"></el-input>
        <el-input
          @keyup.enter="loginFun"
          v-model="login.passwd"
          show-password
          placeholder="请输入密码"
        ></el-input>
      </div>
      <div class="core">
        <div class="core_login" @click="loginFun">登 录</div>
        <div class="core_sign" @click="signBoxFun">注 册</div>
      </div>
    </div>
    <el-drawer
      title="欢迎加入"
      v-model="show_hide.signBox"
      direction="rtl"
      :before-close="signBoxFun"
      destroy-on-close
    >
      <div>
        <el-input
          v-model="sign.user"
          placeholder="请输入你的用户名(大于等于6位字符)"
        ></el-input>
      </div>
      <div>
        <el-input
          v-model="sign.passwd"
          placeholder="请输入你的密码(大于等于六位字符)"
          show-password
          clearable
        ></el-input>
      </div>
      <div>
        <el-input
          v-model="sign.email"
          placeholder="请输入你的邮箱(xxxxxx@xx.xxx格式)"
        ></el-input>
      </div>
      <div>
        <el-input
          v-model="sign.tel"
          placeholder="请输入你的11位联系方式"
        ></el-input>
      </div>
      <div>
        <el-input v-model="reg" placeholder="请输入邀请码"></el-input>
      </div>
      <div class="core">
        <div class="core_login" @click="signBoxFun">取 消</div>
        <div class="core_sign" @click="confirmSign">注 册</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import loginJS from "./login.js";
export default {
  setup() {
    let {
      login,
      sign,
      show_hide,
      methodFun: { loginFun, signBoxFun, confirmSign },
    } = loginJS();

    return {
      loginFun,
      signBoxFun,
      confirmSign,
      login,
      sign,
      show_hide,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 90%;
  border-width: 1px;
  border-style: solid;
  border-bottom-color: #99ff99;
  border-right-color: #99ccff;
  border-top-color: #99ffff;
  border-left-color: #99ffcc;
  border-radius: 8px;
  margin: 20px 30px 20px;
  background-color: transparent;
  color: #ff5cad;
}
/deep/.el-input__suffix-inner {
  line-height: 80px;
}
/deep/.el-drawer {
  width: 540px;
  border-width: 1px;
  border-style: solid;
  border-bottom-color: #99ff99;
  border-right-color: #99ccff;
  border-top-color: #99ffff;
  border-left-color: #99ffcc;
  border-radius: 8px;
  background-color: transparent;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../../static/images/99.gif");
  background-size: cover;
  .login {
    position: absolute;
    width: 600px;
    height: 400px;
    margin: 200px 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-bottom-color: #99ff99;
    border-right-color: #99ccff;
    border-top-color: #99ffff;
    border-left-color: #99ffcc;
    box-shadow: 0px 0px 10px 2px pink;
    .title {
      text-indent: 20px;
      margin: 10px 0px;
      .titleInfo {
        // display: block;
        padding: 0px 10px;
        font-size: 24px;
        font-family: "kaiti";
        background-image: -webkit-linear-gradient(
          top,
          #bc2f08,
          #d75d10,
          #de6912
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .row {
      height: 2px;
      background: linear-gradient(to left, #ff99cc, #ff5cad, #ff1f8f, #5cffad);
    }
    .content {
      .user,
      .password {
        height: 40px;
        line-height: 40px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: #99ff99;
        border-right-color: #99ccff;
        border-top-color: #99ffff;
        border-left-color: #99ffcc;
        border-radius: 8px;
        margin: 40px 30px 0px;
      }
    }
  }
  .core {
    display: flex;
    padding: 40px 50px;
    justify-content: space-around;
    .core_login,
    .core_sign {
      display: block;
      width: 80px;
      height: 40px;
      border-radius: 6px;
      border-width: 1px;
      border-style: solid;
      border-top-color: #99ffff;
      border-right-color: #99ccff;
      border-bottom-color: #99ff99;
      border-left-color: #99ffcc;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      color: rgb(233, 195, 195);
      &:hover {
        color: #FF3D64;
      border-top-color: #99ff99;
      border-right-color: #99ffcc;
      border-bottom-color: #99ffff;
      border-left-color: #99ccff;
      }
    }
  }
}
</style>
